<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>前端工具百宝箱 - 小郭博客 吉他郭</title>
<meta name="description" content="前端工具百宝箱">
<meta name="keywords" content="前端工具百宝箱">
<meta name="author" content="吉他郭、小郭">
<link href="https://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css2/site.min.css?1530947420051" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://lib.baomitu.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://lib.baomitu.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--><!--[if IE 9]>
<script src="https://lib.baomitu.com/geopattern/1.2.3/js/base64.min.js"></script>
<script src="https://lib.baomitu.com/geopattern/1.2.3/js/typedarray.min.js"></script>
<![endif]-->
<style>
	ul,li{
		list-style:none;
		margin: 0;
		padding: 0;
	}
	img{
		max-width: 100%;
	}
	.page-wrap{
		margin-left: auto;
		margin-right: auto;
		max-width: 1100px;
	}
	.lists{
		flex-wrap: wrap;
		display: flex;
	}
	.lists li {
		width: 25%;
	}
	.lists li a {
	    display: block;
	    overflow: hidden;
	    margin: 5px;
	    text-align: center;
	    position: relative;
	}

	.lists li a >p {
	    position: absolute;
	    width: 100%;
	    top: 38%;
	    margin: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	    color: #ffffff;
	    padding: 10px 0;
	}
	.lists li a:hover img {
	    transform: scale(1.1);
	}

	.lists li a img {
	    transition: 0.5s;
	}
	.markdown-body ol, .markdown-body ul{margin: 0;padding: 0;}
	@media (min-width: 768px) {
		.lists li a{
			height: 180px;
		}
	}


</style>

</head>
<body class="home-template">
<header class="site-header"><nav class="navbar navbar-static-top main-navbar" id="top">
<div class="container">
	<div class="navbar-header">
		<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="/" class="navbar-brand text-hide" >吉他郭</a>
	</div>
	<nav id="bs-navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav navbar-right">
		<li><a href="../">首页</a></li>
		<li><a href="http://www.d163.net/" target="_blank">博客</a></li>
		<li><a href="#about">关于</a></li>
	</ul>
	</nav>
</div>
</nav>
<div class="container jumbotron">
	<div class="row">
		<div class="col-xs-12">
			<h1>前端工具百宝箱</h1>
			<p>为程序员及前端工作者提供高效的操作便利。</p>
			<div class="search-wraper" role="search">
				<div class="form-group">
					<input id="searchCityName" class="form-control search clearable" placeholder="搜索工具名称：如CSS格式化" autocomplete="off" autofocus="" tabindex="0" autocorrect="off" autocapitalize="off" spellcheck="false"> <i class="fa fa-search"></i>
				</div>
			</div>
		</div>
		
	</div>
</div>
<div class="package-info well well-md text-center">
<div class="container">
	<ul class="list-inline">
		<li><a href="#api" data-toggle="tab">使用</a></li>
		<li><a href="#code" data-toggle="tab">示例</a></li>
	</ul>
</div>
</div>
</header>
<main class="container tab-content" id="myTabContent">
		<article class="markdown-body tab-pane fade in active" id="api">
		<div class="page-wrap">
		  
		<div class="list-group packages">
			<ul class="lists" v-cloak>
			    
			    <li v-for="(v,index) in lists">
			        <a :href="v.link">
				        <div class="img"><img :src="domain+v.imgsrc"></div>
				        <p class="package-name">{{v.title}}</p>
			        </a>
			    </li>
			    
			</ul>
		</div>
		</div>
		
		</article>
		<article class="markdown-body tab-pane fade" id="code">
		示例
		</article>


</main>
<footer id="footer" class="footer hidden-print">
<div class="container">
	<div class="row">
		<div class="footer-about col-md-5 col-sm-12" id="about">
			<h4>关于 吉他郭</h4>
			<p>
				吉他郭，小郭一位80后站长，热爱前端工作、PHP后台、各类CMS建站，本站为大家提供前端工具百宝箱
			</p>
			<p>
				自2015年上线以来已经帮助了10025位前端工作者提高工作效率。
			</p>
			<p>
				反馈或建议请发送邮件至：vip@d163.net
			</p>
		</div>
		<div class="footer-links col-md-3 col-sm-12">
			<h4>友情链接</h4>
			<ul class="list-unstyled list-inline">
				<li><a href="http://www.d163.net/" target="_blank" >小郭博客</a>
				</li>
			</ul>
		</div>
      	<div class="footer-sponsors col-md-2 col-sm-12">
      		<h4>CDN 赞助商</h4>
      		<p>
      			<a href="###" style="border-bottom: none;" target="_blank" rel="nofollow">
      				<img src="http://www.d163.net/common/static/boke/images/7yi_logo2.png" alt="又拍云" style="width: 100%;">
      			</a>
      			
      		</p>
      	</div>
		<div class="footer-techs col-md-2 col-sm-12">
		      <h4>赞助我们</h4>
		      <img src="http://www.d163.net/uploads/202004/10/200410120602364.jpg" style="width: 100%;">
		    </div>
	</div>
</div>
<div class="copy-right">
	<span>&copy; 2015-2020</span><a href="http://www.miibeian.gov.cn/" target="_blank">赣ICP备20005329号-1</a><span></span>
</div>
</footer><a href="#" id="back-to-top"><i class="fa fa-angle-up"></i></a>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://lib.baomitu.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://lib.baomitu.com/geopattern/1.2.3/js/geopattern.min.js"></script>
<script src="https://lib.baomitu.com/clipboard.js/1.5.16/clipboard.min.js"></script>
<script src="https://lib.baomitu.com/localforage/1.4.2/localforage.min.js"></script>
<script src="https://lib.baomitu.com/lodash.js/4.17.4/lodash.min.js"></script>
<script src="js/site.min.js"></script>
<script src="https://andy168.gitee.io/dctimer/js/vue.min.js"></script>
<script src="https://andy168.gitee.io/dctimer/js/axios.min.js"></script>
<script src="js/index.js?v=1.0"></script>
 <script>
 function searchCity() {
     var searchCityName = $.trim($("#searchCityName").val()).toLowerCase();
     if (searchCityName == "") {
         $(".lists li").show();
     } else {
         $(".lists li").each(function() {
             
            var cityName = $.trim($(this).find('.package-name').text()).toLowerCase();
            if (cityName.indexOf(searchCityName) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
     }
 }
 $('#searchCityName').on('input propertychange', function() {
     searchCity();
 });
</script>
</body>
</html>